<template>
	<view class='wrap'>
		<text class='vlabel' :style='{"font-size":upx2px(size),"color":color,"margin-bottom":upx2px(offset)}'>
			<slot></slot>
		</text>
		<image class='image' :src="img"></image>
	</view>
</template>

<script>
	export default {
		props: {
			size: {
				type: String,
				default: '22upx'
			},
			color: {
				type: String,
				default: 'white'
			},
			img: {
				type: String,
				default: ''
			},
			offset: {
				type: String,
				default: ''
			},
		},
		data() {
			return {

			};
		},
		methods: {
			upx2px(upx) {
				//如果是upx结尾，则去掉upx并转换为px
				if (upx.endsWith("upx")) {
					upx = upx.replace("upx", "")
				} else if (upx.endsWith("px") || upx.endsWith("%")) { //如果是px或%结尾，则原样返回
					return upx
				}
				//如果没有传入单位，则为upx
				return uni.upx2px(upx) + "px";
			}
		}
	}
</script>

<style>
	.wrap {
		position: relative;
		width: 100%;
		height: 100%;
		writing-mode: vertical-lr;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.vlabel {
		font-weight: 500;
		z-index: 9999;
	}

	.image {
		position: absolute;
		top: 0upx;
		left: 0upx;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
</style>
